<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>用户认证</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="resources/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="resources/css/public.css" media="all"/>
</head>
<body class="childrenBody">
<form class="layui-form">
    <blockquote class="layui-elem-quote quoteBox">
        <form class="layui-form">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    用户姓名： <input type="text" class="layui-input nameVal" placeholder="请输入用户姓名"/>
                </div>
                <div class="layui-input-inline" >
                    用户账号： <input type="text" class="layui-input telVal" placeholder="请输入用户账号"/>
                </div>
                <a class="layui-btn search_btn" data-type="reload">搜索</a>
            </div>
        </form>
    </blockquote>
    <table id="tpUserCheckTable" lay-filter="tpUserCheckTable"></table>
</form>
<script type="text/javascript" src="resources/layui/layui.js"></script>
<script type="text/javascript" th:inline="none">
    layui.use(['form', 'layer', 'table', 'laytpl'], function () {
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery,
            laytpl = layui.laytpl,
            table = layui.table;
        //用户列表
        var tableIns = table.render({
            elem: '#tpUserCheckTable',
            url: 'TASelectByPage.do',
            cellMinWidth: 95,
            page: true,
            height: "full-200",
            limits: [10, 15, 20, 25],
            limit: 10,
            id: "tpUserCheckTablezz",
            cols: [[
                {type: "checkbox", fixed: "left", width: 50},
                {field: 'perAuthId', title: '用户ID', minWidth: 50, align: "center"},
                {field: 'userTel', title: '用户账号', minWidth: 200, align: "center",templet:'#aa'},
                {field: 'userName', title: '用户名称', minWidth: 100, align: "center",templet:'#bb'},
                {field: 'cardImg1', title: '身份证正面',minWidth: 150, align: 'center',templet: '#cc'},
                {field: 'cardImg2', title: '身份证照反面',minWidth: 150, align: 'center',templet: '#dd'},
                {field: 'carImg', title: '行驶证照片',minWidth: 150, align: 'center',templet: '#ee'},
                {field: 'perAuthStatus', title: '审核状态',minWidth: 100, align: 'center',templet: function (obj) {
                      var res='';
                      if (obj.perAuthStatus==0){
                          res="已审核";
                      }else if (obj.perAuthStatus==1){
                          res="未审核"
                      }
                      return res;
                    }},
                {title: '操作', field: 'perAuthStatus', fixed: "right", align: "center",templet:function (obj) {
                        if (obj.perAuthStatus==1){
                            return '<a class="layui-btn layui-btn-xs " id="tpUserCheckBar" lay-event="check" >审核批准</a>';
                        }else if (obj.perAuthStatus==0){
                            return '<a class="layui-btn layui-btn-xs layui-btn-warm" id="tpUserCheckBar" lay-event="check" >取消批准</a>';
                        }
                    }}
            ]]
        });
        //实现搜索功能
        $(".search_btn").click(function () {
            var perUserName = $(".nameVal").val();
            var perUserTel=$(".telVal").val();
            var perAuthStatus=$(".statusVal").val();
            table.reload('tpUserCheckTablezz', {
                where: {
                    perUserName:perUserName,
                    perUserTel:perUserTel,
                    perAuthStatus:perAuthStatus,
                }
            });
        });

        table.on("tool(tpUserCheckTable)",function (obj) {
            var data=obj.data;
            switch (obj.event) {
                case 'check' :
                    updateAstatus(data);
                    break;
            }
        })

        function  updateAstatus(data) {

            if (data.perAuthStatus==1){
                var perAuthStatus=0;
                layer.confirm('您确定要审核批准这个商家吗？', {icon: 3, title: '提示'}, function (index) {
                    $.ajax({
                        url: 'updateAStatus.do',
                        data: {perAuthId:data.perAuthId,perAuthStatus:perAuthStatus},
                        type: "POST",
                        dataType: "json",
                        success: function (res) {
                            if (res.code == 200) {
                                layer.msg("审核批准成功");
                                tableIns.reload();
                            }
                        }
                    })
                    //关闭提示框
                    layer.close(index);
                });
            }else if (data.perAuthStatus==0){
                var perAuthStatus=1;
                layer.confirm('您确定要取消批准这个商家吗？', {icon: 3, title: '提示'}, function (index) {
                    $.ajax({
                        url: 'updateAStatus.do',
                        data: {perAuthId:data.perAuthId,perAuthStatus:perAuthStatus},
                        type: "POST",
                        dataType: "json",
                        success: function (res) {
                            if (res.code == 200) {
                                layer.msg("取消批准成功");
                                tableIns.reload();
                            }
                        }
                    })
                    //关闭提示框
                    layer.close(index);
                });
            }


        }

        //显示大图片
        $(document).on("mouseout", ".layui-table-main tr", function (data) {
//可以理解为鼠标移动到table时拿到了该行表格的所有数据，
//然后判断 data.relatedTarget.id 是否等于上面定义的<img> 的id  pitureChange
            if (data.relatedTarget.id == "pitureChange") {
                //拿到 id 为 pitureChange img的 属性
                var data = data.fromElement.innerHTML;
                //由于是整个img 我们只需要图片地址 进行截取
                var arr = data.split('src="')[1].split('>')[0];
                //判断是否是图片格式，为图片格式则走openMsg分支
                if (!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(arr)) {
                    openMsg(arr)
                }
            }else if (data.relatedTarget.id == "pitureChange1") {
                //拿到 id 为 pitureChange img的 属性
                var data = data.fromElement.innerHTML;
                //由于是整个img 我们只需要图片地址 进行截取
                var arr = data.split('src="')[1].split('>')[0];
                //判断是否是图片格式，为图片格式则走openMsg分支
                if (!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(arr)) {
                    openMsg1(arr)
                }
            }else if (data.relatedTarget.id == "pitureChange2") {
                //拿到 id 为 pitureChange img的 属性
                var data = data.fromElement.innerHTML;
                //由于是整个img 我们只需要图片地址 进行截取
                var arr = data.split('src="')[1].split('>')[0];
                //判断是否是图片格式，为图片格式则走openMsg分支
                if (!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(arr)) {
                    openMsg2(arr)
                }
            }
        });
        function openMsg(data) {
            var data = '<img id="pitureChange" style="width: 220px;height: 150px" src="' + data + '"  >'
            layer.msg(data, {
                time: 2000
            });
        }
        function openMsg1(data) {
            var data = '<img id="pitureChange1" style="width: 220px;height: 150px" src="' + data + '"  >'
            layer.msg(data, {
                time: 2000
            });
        }
        function openMsg2(data) {
            var data = '<img id="pitureChange2" style="width: 220px;height: 150px" src="' + data + '"  >'
            layer.msg(data, {
                time: 2000
            });
        }



    });

</script>
<script id="aa" type="text/html">
   {{d.tperUser.perUserTel}}
</script>
<script id="bb" type="text/html">
    {{d.tperUser.perUserName}}
</script>
<script id="cc" type="text/html">
    <img id="pitureChange" style="height: 100%"  src="{{d.tperCard.perCardImg1}}">
</script>
<script id="dd" type="text/html">
    <img id="pitureChange1" style="height: 100%"  src="{{d.tperCard.perCardImg2}}">
</script>
<script id="ee" type="text/html">
   <img id="pitureChange2" style="height: 100%"  src="{{d.tperPermit.perPermitImg}}">
</script>
</body>
</html>